<template>
  <view class="users-manage">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-easyinput
        v-model="searchKey"
        placeholder="搜索用户名"
        :clearable="true"
      />
      <button type="primary" size="mini" @click="handleSearch">搜索</button>
    </view>

    <!-- 用户列表 -->
    <view class="user-list">
      <uni-card v-for="user in userList" 
                :key="user.id"
                :title="user.username"
                :extra="user.role">
        <view class="user-info">
          <view class="info-item">
            <text class="label">注册时间:</text>
            <text>{{formatDate(user.created_at)}}</text>
          </view>
          <view class="info-item">
            <text class="label">状态:</text>
            <text :class="user.status === 'active' ? 'status-active' : 'status-inactive'">
              {{user.status === 'active' ? '正常' : '禁用'}}
            </text>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <template v-slot:actions>
          <view class="actions">
            <button size="mini" @click="handleEdit(user)">编辑</button>
            <button size="mini" 
                    :type="user.status === 'active' ? 'warn' : 'primary'"
                    @click="handleToggleStatus(user)">
              {{user.status === 'active' ? '禁用' : '启用'}}
            </button>
            <button size="mini" type="warn" @click="handleDelete(user)">删除</button>
          </view>
        </template>
      </uni-card>
    </view>

    <!-- 分页器 -->
    <uni-pagination
      :total="total"
      :pageSize="pageSize"
      :current="currentPage"
      @change="handlePageChange"
    />

    <!-- 编辑用户弹窗 -->
    <uni-popup ref="editPopup" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="编辑用户"
        :value="editForm.username"
        placeholder="请输入用户名"
        @confirm="confirmEdit"
      />
    </uni-popup>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      searchKey: '',
      userList: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      editForm: {
        id: null,
        username: ''
      }
    }
  },
  
  onLoad() {
    this.getUserList()
  },
  
  methods: {
    // 获取用户列表
    async getUserList() {
      try {
        const res = await request({
          url: '/admin/users',
          method: 'GET',
          data: {
            page: this.currentPage,
            page_size: this.pageSize,
            search: this.searchKey
          }
        })
        if(res.data.status === 'success') {
          this.userList = res.data.data.list
          this.total = res.data.data.total
        }
      } catch(e) {
        console.error('获取用户列表失败:', e)
      }
    },
    
    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.getUserList()
    },
    
    // 编辑用户
    handleEdit(user) {
      this.editForm.id = user.id
      this.editForm.username = user.username
      this.$refs.editPopup.open()
    },
    
    // 确认编辑
    async confirmEdit(value) {
      try {
        const res = await request({
          url: `/admin/users/${this.editForm.id}`,
          method: 'PUT',
          data: {
            username: value
          }
        })
        if(res.data.status === 'success') {
          uni.showToast({
            title: '更新成功'
          })
          this.getUserList()
        }
      } catch(e) {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    },
    
    // 切换用户状态
    async handleToggleStatus(user) {
      try {
        const res = await request({
          url: `/admin/users/${user.id}/status`,
          method: 'PUT',
          data: {
            status: user.status === 'active' ? 'inactive' : 'active'
          }
        })
        if(res.data.status === 'success') {
          uni.showToast({
            title: '状态更新成功'
          })
          this.getUserList()
        }
      } catch(e) {
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    },
    
    // 删除用户
    handleDelete(user) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除用户 ${user.username} 吗？`,
        success: async (res) => {
          if(res.confirm) {
            try {
              const res = await request({
                url: `/admin/users/${user.id}`,
                method: 'DELETE'
              })
              if(res.data.status === 'success') {
                uni.showToast({
                  title: '删除成功'
                })
                this.getUserList()
              }
            } catch(e) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 分页变化
    handlePageChange(e) {
      this.currentPage = e.current
      this.getUserList()
    },
    
    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString()
    }
  }
}
</script>

<style lang="scss">
.users-manage {
  padding: 20rpx;
  
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    button {
      margin-left: 20rpx;
    }
  }
  
  .user-list {
    .user-info {
      .info-item {
        display: flex;
        margin-bottom: 10rpx;
        
        .label {
          width: 150rpx;
          color: #666;
        }
        
        .status-active {
          color: #4cd964;
        }
        
        .status-inactive {
          color: #dd524d;
        }
      }
    }
    
    .actions {
      display: flex;
      gap: 20rpx;
      
      button {
        margin: 0;
      }
    }
  }
}
</style> 